<script setup lang="ts">
import { inject, provide, reactive, watch } from 'vue';
import PositionType from '@/views/task/components/PositionType.vue';
import {myStore} from '@/store/my'
import { Toast } from 'vant';
import { workEditAPI, workAddAPI } from '@/api/my'
const store = myStore()

const props = defineProps({
    item: {
        type: Object
    }
})
const { closeChange } = inject('popup')
const state = reactive({
    showPositionType: false,
    showWorkStartTime: false,
    showWorkEndTime: false,
    
    positionValue: '',
    companyName: '',
    startTime: '',
    endTime: '',
    workDes: '',
    minDate: new Date(1995,1,1), // 最小日期
    maxDate: new Date(), // 最大日期（当前日期）
})
// 回显数据
const setInfo = () => {
    if (Object.keys(props.item).length !== 0) {
        state.positionValue = props.item.work_position
        state.companyName = props.item.company_name
        state.startTime = props.item.start_time
        state.endTime = props.item.end_time
        state.workDes = props.item.company_describe
    }
}

// 监控item变化 避免出现上次数据
watch(()=> props.item, () => {
    setInfo()
})
setInfo()
// 关闭职位类型 弹框
const closePositionType = (name: string) => {
    if (name) {
        state.positionValue = name
    }
    state.showPositionType = false
}

// 保存按钮
const submit = async() => {
    if (!state.positionValue) {
        Toast('请选择职位类型')
        return
    }
    if (!state.companyName) {
        Toast('请填写公司名称')
        return
    }
    if (!state.endTime && !state.startTime) {
        Toast('请填写工作时间')
        return
    }
    if (!state.workDes) {
        Toast('请填写工作描述')
        return
    }
    // 判断添加还是修改
    if (props.item.id) {
        const res = await workEditAPI({
            "id": props.item.id, 
            "company_describe": state.workDes, 
            "company_name": state.companyName, 
            "end_time": state.endTime, 
            "start_time": state.startTime, 
            "work_position": state.positionValue
        })
        if (res) {
            closeChange()
            Toast('修改成功')
        }else{
            Toast('修改失败')
        }
    }else {
        const res = await workAddAPI({
            "uuid": props.item.uuid, 
            "company_describe": state.workDes, 
            "company_name": state.companyName, 
            "end_time": state.endTime, 
            "start_time": state.startTime, 
            "work_position": state.positionValue
        })
        if (res) {
            closeChange()
            Toast('添加成功')
        }else{
            Toast('添加失败')
        }
    }
}
// 选择开始工作时间
const WorkStartTimeConfirm = (val) => {
    state.startTime = val.getFullYear() + '-' + (val.getMonth()+1) + '-' + val.getDate()
    state.showWorkStartTime = false
}
// 选择结束工作时间
const WorkEndTimeConfirm = (val) => {
    state.endTime = val.getFullYear() + '-' + (val.getMonth()+1) + '-' + val.getDate()
    state.showWorkEndTime = false
}
provide('closePositionType',closePositionType)
</script>
<template>
    <van-nav-bar
        title="工作经历"
        left-arrow
        @click-left="closeChange"
    />
    <div class="position-list">
        <div class="user-item">
            <h5>公司名称</h5>
            <van-field
                v-model="state.companyName"
                placeholder="请填写您的公司名称"
            />
        </div>
        <div class="user-item">
            <h5>职位类型</h5>
            <van-field
                v-model="state.positionValue"
                placeholder="请选择您的职位类型"
                is-link
                readonly
                @click="state.showPositionType=true"
            />
        </div>
        <div class="user-item">
            <h5>工作时间</h5>
            <div class="work-time-list">
                <van-field
                    v-model="state.startTime"
                    placeholder="请选择"
                    readonly
                    @click="state.showWorkStartTime=true"
                />
                <!-- 工作开始时间 -->
                <van-action-sheet v-model:show="state.showWorkStartTime">
                    <van-datetime-picker
                        type="date"
                        title="选择年月日"
                        :min-date="state.minDate"
                        :max-date="state.maxDate"
                        @confirm="WorkStartTimeConfirm"
                        @cancel="state.showWorkStartTime=false"
                    />
                </van-action-sheet>
                <span>—</span>
                <van-field
                    v-model="state.endTime"
                    placeholder="请选择"
                    readonly
                    @click="state.showWorkEndTime=true"
                />
                <!-- 工作结束时间 -->
                <van-action-sheet v-model:show="state.showWorkEndTime">
                    <van-datetime-picker
                        type="date"
                        title="选择年月日"
                        :min-date="state.minDate"
                        :max-date="state.maxDate"
                        @confirm="WorkEndTimeConfirm"
                        @cancel="state.showWorkEndTime=false"
                    />
                </van-action-sheet>
            </div>
        </div>
        <div class="user-item">
            <h5>工作描述</h5>
            <van-field
                v-model="state.workDes"
                placeholder="请填写您的工作描述"
                type="textarea"
                rows="10"
                autosize
            />
        </div>
        <button class="wy-submit" @click="submit">保存</button>
        <!-- 切换职位 弹窗 -->
        <van-popup 
            v-model:show="state.showPositionType" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <PositionType />
        </van-popup>
    </div>
</template>


<style scoped>
  .position-list{
    margin: 1.52rem 0.67rem 0;
  }
  .work-time-list {
    display: flex;
    align-items: center;
  }
  .work-time-list span {
    width: 0.83rem;
    height: 0.05rem;
    margin-right: 2.4rem;
    font-weight: 300;
    font-size: 0.8rem;
    color: #333333;
    line-height: 0.34rem;
  }
</style>